---
title: Panels
description: Tairo panels allow to display additional data and details in animated left or right drawers.
components:
  - TairoPanels
icon:
  src: /img/illustrations/components/logo-icon.svg
  srcDark: /img/illustrations/components/logo-icon.svg
---

::doc-component-demo
---
title: Activity panel
demo: '#examples/panel/activity.vue'
---
Panels can be opened using the `open` function. You can define the panels you use inside the `app.config.ts` file in your project. You can also pass `props` to panels using the same function. Click below for an activity panel example.
::

::doc-component-demo
---
title: Language panel
demo: '#examples/panel/language.vue'
---
Panels can be opened using the `open` function. You can define the panels you use inside the `app.config.ts` file in your project. You can also pass `props` to panels using the same function. Click below for a language panel example.
::

::doc-component-demo
---
title: Search panel
demo: '#examples/panel/search.vue'
---
Panels can be opened using the `open` function. You can define the panels you use inside the `app.config.ts` file in your project. You can also pass `props` to panels using the same function. Click below for a search panel example.
::

::doc-component-demo
---
title: Task panel
demo: '#examples/panel/task.vue'
---
Panels can be used to show dynamic data using `props`. Pass props to a panel using the  props object as the second function parameter: 

`open('name', { key: value })`

Click below for a task panel example.
::
